<template>
  <div id="noticeDetailDialog">
    <el-dialog
      title="通知用户人群"
      width="700px"
      :visible.sync="detailDialogData.isShow"
    >
      <el-form
        ref="ruleForm"
        height="500px"
        :model="ruleForm"
        label-width="120px"
        label-position="right"
      >
        <el-form-item
          label="触达人群"
          label-width="90px"
          prop="studentGroupType"
        >
          <el-input
            v-model="showTypeText"
            disabled
            style="width:200px"
          ></el-input>
          <template
            v-if="
              ruleForm.touchType === 'SMS' &&
                ruleForm.studentGroupType === 'ALL'
            "
          >
            <div style="color:red">
              本次触达将产生实际费用，预计费用为：4.52万元；
            </div>
          </template>
        </el-form-item>
        <template v-if="ruleForm.studentGroupType !== 'ALL'">
          <div class="dialog-footer">
            <el-button
              v-for="(item, index) in ruleForm.studentGroupsDtos"
              :key="index"
              size="medium"
              type="primary"
            >
              {{ item.name }}
            </el-button>
          </div>
          <template v-if="ruleForm.touchType === 'SMS'">
            <span v-if="!smsMsg" style="color:red">加载中。。。</span>
            <span v-else style="color:red">{{ smsMsg }}</span>
          </template>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogData.isShow = false">关 闭</el-button>
        <el-button type="success" @click="detailDialogData.isShow = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTouchCrowdAPI, getMoneyAPI } from '@/api/noticeManagement/opeNotice' // 接口
export default {
  name: 'NoticeDetailDialog',
  msg: '运营审核-消息详情',
  props: ['detailDialogData'],
  data() {
    return {
      loading: false,
      ruleForm: {
        studentGroupsDtos: [],
        studentGroupType: '', // 触达人群
        touchType: ''
      },
      smsMsg: ''
    }
  },
  computed: {
    showTypeText() {
      return this.ruleForm.studentGroupType === 'ALL' ? '全站用户' : '用户人群'
    }
  },
  mounted() {
    this.noticeId = this.detailDialogData.noticeId
    this.getTouchCrowd()
  },
  methods: {
    getTouchCrowd() {
      getTouchCrowdAPI(this.noticeId, (response) => {
        this.ruleForm = response
        if (
          this.ruleForm.studentGroupType !== 'ALL' &&
          this.ruleForm.touchType === 'SMS'
        ) {
          if (response.studentGroupsDtos.length === 0) return
          this.getMoney(response.studentGroupsDtos)
        }
      })
    },
    getMoney(obj) {
      let ids = []
      obj.forEach((item) => {
        ids.push(item.id)
      })
      let params = {
        ids: ids.join(',')
      }
      getMoneyAPI(params, (response) => {
        this.smsMsg = response.msg
      })
    }
  }
}
</script>
<style lang="less">
#noticeDetailDialog {
  .el-dialog__body {
    height: 300px;
  }
  .dialog-footer {
    padding-left: 20px;
    margin-bottom: 20px;
  }
}
</style>
